<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-27 16:25:11
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-29 18:13:45
-->
<template>
  <div>
    <First></First>
    <hr />
    <Circle></Circle>
    <hr />
    <Reactive></Reactive>
    <hr />
    <toRef></toRef>
    <hr />
    <BackCom></BackCom>
    <hr />
    <toRefs></toRefs>
    <hr />
    <refCom></refCom>
    <hr />
    <demo></demo>
    <hr />
    <computed></computed>
    <hr />
    <watch></watch>
    <hr />
    <watch2></watch2>
    <hr />
    <refDom></refDom>
    <hr />
    <watchEffect></watchEffect>
    <hr />
    <propsEmits app="我是根组件=app" @handle="handle"></propsEmits>
    <hr />
    <ProvideInject></ProvideInject>
    <hr />
    <model v-model="modelMsg"></model>
    <hr />
    <RouterCom></RouterCom>
    <hr />
    <piniaCom></piniaCom>
  </div>
</template>

<script>
import { ref } from 'vue'
import First from './components/First.vue'
import Circle from './components/02-Circle.vue'
import Reactive from './components/03-Reactive.vue'
import toRef from './components/04-toRef.vue'
import BackCom from './components/BackCom.vue'
import toRefs from './components/05-toRefs.vue'
import refCom from './components/06-ref.vue'
import demo from './components/07-demo.vue'
import computed from './components/08-computed.vue'
import watch from './components/09-watch.vue'
import watch2 from './components/09-watch2.vue'
import refDom from './components/10-refDom.vue'
import watchEffect from './components/11-watchEffect.vue'
import propsEmits from './components/12-propsEmits.vue'
import ProvideInject from './components/13-ProvideInject.vue'
import model from './components/14-v-model.vue'
import RouterCom from './components/15-RouterCom.vue'
import piniaCom from './components/16-piniaCom.vue'

export default {
  name: 'App',
  components: {
    First,
    Circle,
    Reactive,
    toRef,
    BackCom,
    toRefs,
    refCom,
    demo,
    computed,
    watch,
    watch2,
    refDom,
    watchEffect,
    propsEmits,
    ProvideInject,
    model,
    RouterCom,
    piniaCom
  },
  setup () {
    const handle = (msg) => {
      console.log(111, 'handle', msg);
    }
    const modelMsg = ref('modelMsg123')
    return { handle, modelMsg }
  }

}
</script>
